<template>
  <section class="product-details">
    <div class="container">
      <!-- 颜色和容量选择区域 -->
      <div class="selection-section">
        <!-- 颜色选择 -->
        <div class="option-group">
          <h3 class="option-title">选择颜色</h3>
          <div class="color-options">
            <div
              v-for="color in colorOptions"
              :key="color.name"
              class="color-option"
              :class="{ active: selectedColor === color.name }"
              @click="selectColor(color)"
            >
              <div class="color-sample" :style="{ backgroundColor: color.value }"></div>
              <span class="color-name">{{ color.name }}</span>
            </div>
          </div>
        </div>

        <!-- 容量选择 -->
        <div class="option-group">
          <h3 class="option-title">选择容量</h3>
          <div class="storage-options">
            <div
              v-for="storage in storageOptions"
              :key="storage.size"
              class="storage-option"
              :class="{ active: selectedStorage === storage.size }"
              @click="selectStorage(storage)"
            >
              <span class="storage-size">{{ storage.size }}</span>
              <span class="storage-price">¥{{ storage.price }}</span>
            </div>
          </div>
        </div>
      </div>

      <h2 class="section-title">产品详情</h2>
      
      <div class="details-content">
        <!-- 尺寸与重量 -->
        <div class="spec-group">
          <h3 class="spec-title">尺寸与重量</h3>
          <div class="spec-content">
            <p>长度 {{ productSpecs.dimensions.length }} 宽度 {{ productSpecs.dimensions.width }} 厚度 {{ productSpecs.dimensions.thickness }}</p>
            <p>重量 {{ productSpecs.dimensions.weight }}</p>
          </div>
        </div>

        <!-- 屏幕规格 -->
        <div class="spec-group">
          <h3 class="spec-title">屏幕</h3>
          <div class="spec-content">
            <p>尺寸 {{ productSpecs.screen.size }}</p>
            <p>材质 {{ productSpecs.screen.type }}，支持 {{ productSpecs.screen.refreshRate }}</p>
            <p>{{ productSpecs.screen.pwm }}，{{ productSpecs.screen.samplingRate }}</p>
            <p>分辨率 {{ productSpecs.screen.resolution }}</p>
            <p>峰值亮度 {{ productSpecs.screen.brightness }}</p>
          </div>
        </div>

        <!-- 存储配置 -->
        <div class="spec-group">
          <h3 class="spec-title">存储</h3>
          <div class="spec-content">
            <p>运行内存 {{ productSpecs.storage.ram }}</p>
            <p>存储内存 {{ productSpecs.storage.rom }}</p>
            <p>扩展存储 {{ productSpecs.storage.expandable }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'ProductDetails',
  props: {
    productData: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const route = useRoute()
    
    // 选中的颜色和容量
    const selectedColor = ref('')
    const selectedStorage = ref('')
    
    // 产品数据
    const colorOptions = ref([])
    const storageOptions = ref([])
    const productSpecs = ref({})

    // 选择颜色
    const selectColor = (color) => {
      selectedColor.value = color.name
      // 这里可以触发价格更新或其他操作
      updatePriceDisplay()
    }

    // 选择容量
    const selectStorage = (storage) => {
      selectedStorage.value = storage.size
      updatePriceDisplay()
    }

    // 更新价格显示
    const updatePriceDisplay = () => {
      // 这里可以通过事件总线或Vuex来更新ProductShowcase中的价格显示
      // 暂时先用简单的方式
      if (selectedStorage.value) {
        const selectedStorageObj = storageOptions.value.find(s => s.size === selectedStorage.value)
        if (selectedStorageObj) {
          // 触发自定义事件来更新价格
          window.dispatchEvent(new CustomEvent('storageChange', {
            detail: {
              price: selectedStorageObj.price,
              storage: selectedStorageObj.size
            }
          }))
        }
      }
    }

    // 初始化产品数据
    const initProductData = () => {
      if (props.productData && Object.keys(props.productData).length > 0) {
        colorOptions.value = props.productData.colors || []
        storageOptions.value = props.productData.storageOptions || []
        productSpecs.value = props.productData.specs || {}
        
        // 设置默认选项
        if (colorOptions.value.length > 0) {
          selectedColor.value = colorOptions.value[0].name
        }
        if (storageOptions.value.length > 0) {
          selectedStorage.value = storageOptions.value[0].size
          updatePriceDisplay()
        }
      } else {
        // 如果没有props数据，使用默认数据
        const defaultData = getDefaultProductData(route.path)
        colorOptions.value = defaultData.colors
        storageOptions.value = defaultData.storageOptions
        productSpecs.value = defaultData.specs
        
        selectedColor.value = colorOptions.value[0].name
        selectedStorage.value = storageOptions.value[0].size
        updatePriceDisplay()
      }
    }

    // 根据路由获取默认产品数据
    const getDefaultProductData = (path) => {
      const dataMap = {
        '/product/pura70-pro-plus': {
          colors: [
            { name: '星耀黑', value: '#2C2C2C' },
            { name: '冰霜银', value: '#E8E8E8' },
            { name: '翡冷翠', value: '#00A680' }
          ],
          storageOptions: [
            { size: '256GB', price: 8979 },
            { size: '512GB', price: 9979 },
            { size: '1TB', price: 11979 }
          ],
          specs: {
            dimensions: {
              length: '160 mm',
              width: '16.1 mm',
              thickness: '0.3 mm',
              weight: '约 219g（含电池）'
            },
            screen: {
              size: '6.8 英寸',
              type: 'OLED',
              refreshRate: '1-120 Hz LTPO 自适应刷新率',
              pwm: '1440 Hz 高频 PWM 调光',
              samplingRate: '300 Hz 触控采样率',
              resolution: 'FHD+ 2648 × 1220 像素',
              brightness: '1000 nits'
            },
            storage: {
              ram: '16 GB RAM *可使用的内存容量小于此值',
              rom: '512 GB / 1 TB ROM *可使用的存储容量小于此值',
              expandable: '不支持存储扩展'
            }
          }
        },
        '/product/pura70-pro': {
          colors: [
            { name: '曜石黑', value: '#1A1A1A' },
            { name: '珍珠白', value: '#F5F5F5' },
            { name: '青山黛', value: '#2E8B57' }
          ],
          storageOptions: [
            { size: '256GB', price: 6999 },
            { size: '512GB', price: 7999 }
          ],
          specs: {
            dimensions: {
              length: '158 mm',
              width: '15.9 mm',
              thickness: '0.32 mm',
              weight: '约 215g（含电池）'
            },
            screen: {
              size: '6.7 英寸',
              type: 'OLED',
              refreshRate: '1-120 Hz LTPO 自适应刷新率',
              pwm: '1440 Hz 高频 PWM 调光',
              samplingRate: '300 Hz 触控采样率',
              resolution: 'FHD+ 2616 × 1208 像素',
              brightness: '1000 nits'
            },
            storage: {
              ram: '12 GB RAM *可使用的内存容量小于此值',
              rom: '512 GB ROM *可使用的存储容量小于此值',
              expandable: '不支持存储扩展'
            }
          }
        },
        '/product/pura70': {
          colors: [
            { name: '亮黑色', value: '#000000' },
            { name: '雪域白', value: '#FFFFFF' },
            { name: '樱语粉', value: '#FFB7C5' }
          ],
          storageOptions: [
            { size: '128GB', price: 5499 },
            { size: '256GB', price: 5999 },
            { size: '512GB', price: 6999 }
          ],
          specs: {
            dimensions: {
              length: '156 mm',
              width: '15.7 mm',
              thickness: '0.35 mm',
              weight: '约 208g（含电池）'
            },
            screen: {
              size: '6.6 英寸',
              type: 'OLED',
              refreshRate: '1-120 Hz LTPO 自适应刷新率',
              pwm: '1440 Hz 高频 PWM 调光',
              samplingRate: '240 Hz 触控采样率',
              resolution: 'FHD+ 2532 × 1170 像素',
              brightness: '800 nits'
            },
            storage: {
              ram: '8 GB RAM *可使用的内存容量小于此值',
              rom: '256 GB / 512 GB ROM *可使用的存储容量小于此值',
              expandable: '不支持存储扩展'
            }
          }
        }
      }
      
      return dataMap[path] || dataMap['/product/pura70-pro-plus']
    }

    onMounted(() => {
      initProductData()
    })

    return {
      selectedColor,
      selectedStorage,
      colorOptions,
      storageOptions,
      productSpecs,
      selectColor,
      selectStorage
    }
  }
}
</script>

<style scoped>
.product-details {
  background: #fff;
  padding: 40px 0;
  margin-top: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 选择区域样式 */
.selection-section {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 40px;
}

.option-group {
  margin-bottom: 30px;
}

.option-group:last-child {
  margin-bottom: 0;
}

.option-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 600;
}

.color-options {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.color-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80px;
}

.color-option.active {
  border-color: #d7000f;
  background-color: #fff5f5;
}

.color-option:hover {
  border-color: #d7000f;
}

.color-sample {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 8px;
  border: 2px solid #f0f0f0;
}

.color-name {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.storage-options {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.storage-option {
  padding: 15px 25px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 120px;
}

.storage-option.active {
  border-color: #d7000f;
  background-color: #fff5f5;
  color: #d7000f;
}

.storage-option:hover {
  border-color: #d7000f;
}

.storage-size {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 16px;
}

.storage-price {
  display: block;
  color: #d7000f;
  font-weight: bold;
  font-size: 14px;
}

/* 保持原有的产品详情样式不变 */
.section-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 30px;
  font-weight: bold;
  text-align: left;
}

.details-content {
  max-width: 100%;
  margin: 0;
}

.spec-group {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.spec-group:last-child {
  border-bottom: none;
}

.spec-title {
  font-size: 20px;
  color: #d7000f;
  margin-bottom: 15px;
  font-weight: 600;
  text-align: left;
}

.spec-content {
  color: #666;
  line-height: 1.8;
  text-align: left;
}

.spec-content p {
  margin-bottom: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .selection-section {
    padding: 20px;
  }
  
  .color-options,
  .storage-options {
    justify-content: center;
  }
  
  .color-option {
    min-width: 70px;
  }
  
  .storage-option {
    min-width: 100px;
    padding: 12px 20px;
  }
}
</style>